﻿<!DOCTYPE html>
<html lang="zxx">
<head>
    <meta charset="utf-8">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <meta content="" name="description">
    <meta content="" name="keywords">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="HandheldFriendly" content="true">
    <meta content="telephone=no" name="format-detection">
    <!-- favicon -->
    <link rel="shortcut icon" type="image/png" href="favicon.png" />
    <!--[if (gt IE 9)|!(IE)]><!-->
    <!-- custom CSS -->
    <link href="css/main.css" rel="stylesheet" type="text/css" />
    <!-- END custom CSS -->
    <!--<![endif]-->
    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
    <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
    <title>下载</title>
    <style>
        .xxx{
            font-size: 16px;
            padding: 10px;
            color: #000;
            cursor: pointer;
        }
        .xxx_ac{
            font-weight: bold;
            color: #144D9E;
        }
    </style>
</head>
<body class="page">
<div class="wrapper-sticky-footer">
    <div class="content-sticky">
        <!-- Header -->
        {include file="public/header"}
        <!-- END header -->
        <!-- content-->
        <div class="wrap wrap_gray pt20">
            <div class="container">
                <span class="xxx">图片</span>
                <span class="xxx">文档表格</span>
                <span class="xxx">视频</span>
                <span class="xxx">音频</span>
                <br/>
                <br/>
                <div class="row" id="uploadMore">
                    {if count($list) > 0}
                    {foreach name='list' item='vo'}
                    <div class="col-sm-3">
                        <div class="thumbnail thumbnail_small">
                            <div class="caption thumbnail__caption">
                                <div class="news caption__news">
                                    <a href="{$vo.up_url}" class="news__link" download="">
                                        <p class="news__text">{$vo.up_name}</p>
                                    </a>
                                </div>
                                <div class="posted">
                                    <span class="posted__date">{$vo.up_time}</span>
                                </div>
                            </div>
                        </div>
                    </div>
                    {/foreach}
                    {/if}

                </div>
            </div>

            <div class="ajax_load hidden" id="more">
                <i class="icon-arrows-cw"></i>Load more
                <svg width="128" height="40" viewBox="0 0 128 40" xmlns="http://www.w3.org/2000/svg">
                    <rect x='0' y='0' fill='none' width='128' height='40'></rect>
                </svg>
            </div>
        </div>
        <!-- END content-->
    </div>
    <!-- Footer -->
    {include file="public/footer"}
</div>
<!-- END Footer -->
<!-- All JavaScript libraries -->

</body>
</html>
<script>
    var type = '';
    var page = 1;
    // 加载页面时先判断“更多按钮”
    $.ajax({
        url:'{:url("index/Uploadfile/showMore")}',
        type:'post',
        data:{page:page},
        dataType:'json',
        success:function (data) {
            if(data.count > 12){
                $('#more').removeClass('hidden');
            }
        }
    });
    // 下一页
    $('#more').click(function () {
        page++;
        $.ajax({
            url:'{:url("index/Uploadfile/moreFiles")}',
            type:'post',
            data:{page:page,type:type},
            dataType:'json',
            success:function (data) {
                var arrLen = data.data.length;
                if(arrLen <= 0){
                    $('#more').addClass('hidden');
                }else {
                    var datas = data.data;
                    $.each(datas, function(i, item){
                        var _html = '';
                        _html += '<div class="col-sm-3">';
                        _html += '<div class="thumbnail thumbnail_small">';
                        _html += '<div class="caption thumbnail__caption">';
                        _html += '<div class="news caption__news">';
                        _html += '<a href="' + item.up_url + '" class="news__link" download="">';
                        _html += '<p class="news__text">' + item.up_name + '</p>';
                        _html += '</a>';
                        _html += '</div>';
                        _html += '<div class="posted">';
                        _html += '<span class="posted__date">' + item.up_time + '</span>';
                        _html += '</div>';
                        _html += '</div>';
                        _html += '</div>';
                        _html += '</div>';
                        $('#uploadMore').append(_html);
                    });
                    if(arrLen < 12){
                        $('#more').addClass('hidden');
                    }else {
                        $('#more').removeClass('hidden');
                    }
                }
            }
        });
    })
</script>
<script>
    $('.xxx').click(function () {
        type = $(this).text().trim();
        $(this).addClass('xxx_ac').siblings().removeClass('xxx_ac');
        page = 0;
        $('#uploadMore').empty();
        $('#more').trigger('click');
    })
</script>
